<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>平台用户增长和活跃度分析</title>
  <!-- 引入layui CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
  <!-- 引入Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  <!-- 引入ECharts -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <style>
    body {
      background-color: #F8FAFC;
      padding: 20px;
      margin: 0;
    }
    .layui-card {
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
      border-radius: 6px;
      overflow: hidden;
      transition: all 0.3s;
      margin-bottom: 20px;
    }
    .layui-card:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }
    .layui-card-header {
      background-color: #F8FAFC;
      border-bottom: 1px solid #F1F5F9;
      padding: 14px 20px;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .filter-bar {
      padding: 15px 20px;
      background-color: #F8FAFC;
      border-bottom: 1px solid #F1F5F9;
    }
    .layui-form-item {
      margin-bottom: 15px;
    }
    .layui-form-label {
      padding: 9px 15px;
      color: #334155;
      font-weight: 500;
    }
    .layui-input, .layui-select, .layui-textarea {
      border-radius: 4px;
      padding: 9px 15px;
    }
    .layui-btn {
      transition: all 0.2s;
      border-radius: 4px;
      cursor: pointer;
    }
    .chart-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px;
      box-sizing: border-box;
    }
    .chart-item {
      flex: 1;
      min-width: 300px;
      height: 350px;
    }
    .chart-item-full {
      flex: 100%;
      height: 400px;
    }
    .data-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      padding: 0 20px 15px;
    }
    .stat-item {
      flex: 1;
      min-width: 150px;
      background-color: #FFFFFF;
      border-radius: 6px;
      padding: 15px;
      text-align: center;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      position: relative;
      overflow: hidden;
    }
    .stat-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
    }
    .stat-total::before {
      background-color: #3B82F6;
    }
    .stat-new::before {
      background-color: #10B981;
    }
    .stat-active::before {
      background-color: #F59E0B;
    }
    .stat-retention::before {
      background-color: #8B5CF6;
    }
    .stat-value {
      font-size: 28px;
      font-weight: 600;
      color: #1E293B;
      margin: 5px 0;
      line-height: 1.2;
    }
    .stat-label {
      font-size: 14px;
      color: #64748B;
    }
    .stat-icon {
      font-size: 22px;
      margin-bottom: 5px;
    }
    .stat-change {
      font-size: 12px;
      margin-top: 8px;
      display: inline-flex;
      align-items: center;
    }
    .change-up {
      color: #EF4444;
    }
    .change-down {
      color: #10B981;
    }
    .footer {
      text-align: center;
      color: #95A5A6;
      font-size: 12px;
      margin-top: 30px;
      padding-top: 15px;
      border-top: 1px solid #F1F5F9;
    }
    .time-range-btns {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
    }
    .time-range-btn {
      padding: 5px 12px;
      background-color: #FFFFFF;
      border: 1px solid #E2E8F0;
      border-radius: 4px;
      cursor: pointer;
      font-size: 13px;
      transition: all 0.2s;
    }
    .time-range-btn.active {
      background-color: #3B82F6;
      color: #FFFFFF;
      border-color: #3B82F6;
    }
    .time-range-btn:hover:not(.active) {
      background-color: #F1F5F9;
    }
    .table-container {
      padding: 0 20px 20px;
    }
    .layui-table {
      margin: 0;
      border-radius: 6px;
    }
    .layui-table th {
      font-weight: 500;
      background-color: #F8FAFC;
    }
    .layui-table tr:hover {
      background-color: #F8FAFC;
    }
  </style>
</head>
<body>
  <!-- 核心数据统计卡片 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <h3><i class="fa fa-dashboard"></i> 核心数据概览</h3>
      <div>
        <button class="layui-btn layui-btn-primary" id="refreshDataBtn">
          <i class="fa fa-refresh"></i> 刷新数据
        </button>
        <button class="layui-btn layui-btn-primary" id="exportDataBtn">
          <i class="fa fa-download"></i> 导出报表
        </button>
      </div>
    </div>
    <div class="layui-card-body">
      <div class="data-stats">
        <div class="stat-item stat-total">
          <div class="stat-icon" style="color: #3B82F6;"><i class="fa fa-users"></i></div>
          <div class="stat-value">28,542</div>
          <div class="stat-label">总用户数</div>
          <div class="stat-change change-up">
            <i class="fa fa-arrow-up"></i> 较上月增长 8.2%
          </div>
        </div>
        <div class="stat-item stat-new">
          <div class="stat-icon" style="color: #10B981;"><i class="fa fa-user-plus"></i></div>
          <div class="stat-value">3,256</div>
          <div class="stat-label">本月新增用户</div>
          <div class="stat-change change-up">
            <i class="fa fa-arrow-up"></i> 较上月增长 12.5%
          </div>
        </div>
        <div class="stat-item stat-active">
          <div class="stat-icon" style="color: #F59E0B;"><i class="fa fa-bolt"></i></div>
          <div class="stat-value">12,847</div>
          <div class="stat-label">月活跃用户</div>
          <div class="stat-change change-up">
            <i class="fa fa-arrow-up"></i> 较上月增长 5.3%
          </div>
        </div>
        <div class="stat-item stat-retention">
          <div class="stat-icon" style="color: #8B5CF6;"><i class="fa fa-refresh"></i></div>
          <div class="stat-value">68.3%</div>
          <div class="stat-label">用户留存率</div>
          <div class="stat-change change-down">
            <i class="fa fa-arrow-down"></i> 较上月下降 1.2%
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 用户增长趋势分析 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <h3><i class="fa fa-line-chart"></i> 用户增长趋势分析</h3>
    </div>
    <div class="filter-bar">
      <div class="time-range-btns" id="growthTimeRange">
        <div class="time-range-btn active" data-range="week">近7天</div>
        <div class="time-range-btn" data-range="month">近30天</div>
        <div class="time-range-btn" data-range="quarter">近90天</div>
        <div class="time-range-btn" data-range="year">近1年</div>
      </div>
      <div class="layui-form">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">时间范围</label>
            <div class="layui-input-inline" style="width: 220px;">
              <input type="text" name="growthTimeRangeCustom" placeholder="请选择时间范围" autocomplete="off" class="layui-input" id="growthTimeRangeCustom">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">数据类型</label>
            <div class="layui-input-inline">
              <select name="growthDataType" id="growthDataType">
                <option value="all">全部数据</option>
                <option value="new">新增用户</option>
                <option value="active">活跃用户</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <button class="layui-btn" lay-submit lay-filter="growthFilterBtn"><i class="fa fa-filter"></i> 筛选</button>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-card-body">
      <div class="chart-container">
        <div class="chart-item-full" id="userGrowthChart"></div>
      </div>
    </div>
  </div>

  <!-- 用户活跃度分析 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <h3><i class="fa fa-pie-chart"></i> 用户活跃度分析</h3>
    </div>
    <div class="filter-bar">
      <div class="layui-form">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">分析周期</label>
            <div class="layui-input-inline">
              <select name="activeCycle" id="activeCycle">
                <option value="week">周</option>
                <option value="month" selected>月</option>
                <option value="quarter">季度</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">周期</label>
            <div class="layui-input-inline" style="width: 150px;">
              <input type="text" name="activePeriod" placeholder="请选择周期" autocomplete="off" class="layui-input" id="activePeriod" value="2023年9月">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-card-body">
      <div class="chart-container">
        <div class="chart-item" id="activeLevelChart"></div>
        <div class="chart-item" id="activeTimeChart"></div>
      </div>
    </div>
  </div>

  <!-- 用户行为分析 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <h3><i class="fa fa-bar-chart"></i> 用户行为分析</h3>
    </div>
    <div class="layui-card-body">
      <div class="chart-container">
        <div class="chart-item" id="userSourceChart"></div>
        <div class="chart-item" id="userBehaviorChart"></div>
      </div>
    </div>
  </div>

  <!-- 近期用户增长数据表格 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <h3><i class="fa fa-table"></i> 近期用户增长数据</h3>
    </div>
    <div class="table-container">
      <table class="layui-table" lay-size="sm">
        <thead>
          <tr>
            <th>日期</th>
            <th>新增用户</th>
            <th>活跃用户</th>
            <th>平均访问时长(分钟)</th>
            <th>平均操作次数</th>
            <th>留存率</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>2023-09-18</td>
            <td>128</td>
            <td>1,456</td>
            <td>18.5</td>
            <td>12.3</td>
            <td>72.3%</td>
          </tr>
          <tr>
            <td>2023-09-17</td>
            <td>115</td>
            <td>1,328</td>
            <td>16.8</td>
            <td>10.5</td>
            <td>71.8%</td>
          </tr>
          <tr>
            <td>2023-09-16</td>
            <td>96</td>
            <td>1,152</td>
            <td>15.2</td>
            <td>9.8</td>
            <td>70.5%</td>
          </tr>
          <tr>
            <td>2023-09-15</td>
            <td>132</td>
            <td>1,527</td>
            <td>19.3</td>
            <td>13.2</td>
            <td>73.1%</td>
          </tr>
          <tr>
            <td>2023-09-14</td>
            <td>156</td>
            <td>1,689</td>
            <td>21.5</td>
            <td>14.7</td>
            <td>74.2%</td>
          </tr>
          <tr>
            <td>2023-09-13</td>
            <td>142</td>
            <td>1,586</td>
            <td>20.1</td>
            <td>13.5</td>
            <td>73.6%</td>
          </tr>
          <tr>
            <td>2023-09-12</td>
            <td>108</td>
            <td>1,245</td>
            <td>17.3</td>
            <td>11.2</td>
            <td>72.1%</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div style="text-align: right; padding: 15px 20px; border-top: 1px solid #F1F5F9;">
      <div class="layui-box layui-laypage layui-laypage-default">
        <a href="javascript:;" class="layui-laypage-prev layui-disabled">上一页</a>
        <span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span>
        <a href="javascript:;">2</a>
        <a href="javascript:;">3</a>
        <span class="layui-laypage-spr">…</span>
        <a href="javascript:;">12</a>
        <a href="javascript:;" class="layui-laypage-next">下一页</a>
        <span class="layui-laypage-count">共 36 条</span>
      </div>
    </div>
  </div>
  
  <!-- 页脚信息 -->
  <div class="footer">
    © 高校科研社区管理系统 - 版权所有
  </div>

  <!-- 引入layui JS -->
  <script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.js"></script>
  <script>
    // 初始化layui模块
    layui.use(['form', 'laydate', 'layer'], function() {
      const form = layui.form;
      const laydate = layui.laydate;
      const layer = layui.layer;
      
      // 渲染表单
      form.render();
      
      // 初始化日期选择器
      laydate.render({
        elem: '#growthTimeRangeCustom',
        range: true,
        theme: 'molv'
      });
      
      laydate.render({
        elem: '#activePeriod',
        type: 'month',
        theme: 'molv'
      });
      
      // 时间范围按钮点击事件
      document.querySelectorAll('#growthTimeRange .time-range-btn').forEach(btn => {
        btn.addEventListener('click', function() {
          // 移除所有按钮的active类
          document.querySelectorAll('#growthTimeRange .time-range-btn').forEach(b => {
            b.classList.remove('active');
          });
          // 给当前点击的按钮添加active类
          this.classList.add('active');
          
          // 刷新图表数据
          updateGrowthChart(this.getAttribute('data-range'));
        });
      });
      
      // 筛选按钮点击事件
      form.on('submit(growthFilterBtn)', function(data) {
        layer.msg('筛选条件已应用', {icon: 0, time: 1000});
        // 这里可以根据筛选条件更新图表
        return false;
      });
      
      // 刷新数据按钮
      document.getElementById('refreshDataBtn').addEventListener('click', function() {
        layer.load();
        
        setTimeout(function() {
          layer.closeAll('loading');
          layer.msg('数据已刷新', {icon: 1, time: 1000});
        }, 1000);
      });
      
      // 导出数据按钮
      document.getElementById('exportDataBtn').addEventListener('click', function() {
        layer.confirm('确定要导出用户分析数据报表吗？', {
          btn: ['导出Excel', '导出PDF', '取消']
        }, function(index) {
          layer.close(index);
          layer.load();
          
          setTimeout(function() {
            layer.closeAll('loading');
            layer.msg('Excel报表导出成功', {icon: 1, time: 1500});
          }, 1500);
        }, function(index) {
          layer.close(index);
          layer.load();
          
          setTimeout(function() {
            layer.closeAll('loading');
            layer.msg('PDF报表导出成功', {icon: 1, time: 1500});
          }, 1500);
        });
      });
      
      // 初始化用户增长趋势图表
      function initGrowthChart() {
        const chartDom = document.getElementById('userGrowthChart');
        const myChart = echarts.init(chartDom);
        const option = {
          title: {
            text: '用户增长趋势',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          legend: {
            data: ['新增用户', '活跃用户', '总用户'],
            top: 30
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['9/12', '9/13', '9/14', '9/15', '9/16', '9/17', '9/18']
          },
          yAxis: {
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          series: [
            {
              name: '新增用户',
              type: 'line',
              data: [108, 142, 156, 132, 96, 115, 128],
              smooth: true,
              lineStyle: {
                width: 3,
                color: '#10B981'
              },
              itemStyle: {
                color: '#10B981'
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: 'rgba(16, 185, 129, 0.3)'},
                  {offset: 1, color: 'rgba(16, 185, 129, 0)'}
                ])
              }
            },
            {
              name: '活跃用户',
              type: 'line',
              data: [1245, 1586, 1689, 1527, 1152, 1328, 1456],
              smooth: true,
              lineStyle: {
                width: 3,
                color: '#F59E0B'
              },
              itemStyle: {
                color: '#F59E0B'
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: 'rgba(245, 158, 11, 0.3)'},
                  {offset: 1, color: 'rgba(245, 158, 11, 0)'}
                ])
              }
            },
            {
              name: '总用户',
              type: 'line',
              data: [25120, 25262, 25418, 25550, 25646, 25761, 25889],
              smooth: true,
              lineStyle: {
                width: 3,
                color: '#3B82F6'
              },
              itemStyle: {
                color: '#3B82F6'
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: 'rgba(59, 130, 246, 0.3)'},
                  {offset: 1, color: 'rgba(59, 130, 246, 0)'}
                ])
              }
            }
          ]
        };
        
        myChart.setOption(option);
        
        // 窗口大小变化时重绘图表
        window.addEventListener('resize', function() {
          myChart.resize();
        });
        
        return myChart;
      }
      
      // 更新用户增长趋势图表
      function updateGrowthChart(range) {
        let xAxisData, newUsersData, activeUsersData, totalUsersData;
        
        // 根据不同的时间范围设置不同的数据
        switch(range) {
          case 'week':
            xAxisData = ['9/12', '9/13', '9/14', '9/15', '9/16', '9/17', '9/18'];
            newUsersData = [108, 142, 156, 132, 96, 115, 128];
            activeUsersData = [1245, 1586, 1689, 1527, 1152, 1328, 1456];
            totalUsersData = [25120, 25262, 25418, 25550, 25646, 25761, 25889];
            break;
          case 'month':
            xAxisData = ['8/20', '8/25', '8/30', '9/5', '9/10', '9/15', '9/18'];
            newUsersData = [456, 521, 489, 567, 498, 523, 325];
            activeUsersData = [9876, 10254, 10876, 11254, 11897, 12456, 12847];
            totalUsersData = [22456, 23125, 23786, 24356, 24987, 25643, 25889];
            break;
          case 'quarter':
            xAxisData = ['7/1', '7/10', '7/20', '8/1', '8/10', '8/20', '9/1', '9/10', '9/18'];
            newUsersData = [654, 721, 689, 756, 823, 789, 856, 923, 325];
            activeUsersData = [8765, 9234, 9654, 10234, 10876, 11234, 11567, 12345, 12847];
            totalUsersData = [19876, 20567, 21256, 22134, 22987, 23765, 24654, 25432, 25889];
            break;
          case 'year':
            xAxisData = ['10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'];
            newUsersData = [1254, 1587, 1896, 1056, 987, 1654, 1987, 2154, 2587, 2876, 3025, 3256];
            activeUsersData = [4567, 5234, 6890, 5432, 4876, 7654, 8901, 9654, 10234, 10876, 11543, 12847];
            totalUsersData = [12543, 14130, 16026, 17082, 18069, 19723, 21710, 23864, 26451, 29327, 32352, 35608];
            break;
        }
        
        // 更新图表数据
        const myChart = echarts.getInstanceByDom(document.getElementById('userGrowthChart'));
        myChart.setOption({
          xAxis: {
            data: xAxisData
          },
          series: [
            {
              name: '新增用户',
              data: newUsersData
            },
            {
              name: '活跃用户',
              data: activeUsersData
            },
            {
              name: '总用户',
              data: totalUsersData
            }
          ]
        });
      }
      
      // 初始化用户活跃度等级图表
      function initActiveLevelChart() {
        const chartDom = document.getElementById('activeLevelChart');
        const myChart = echarts.init(chartDom);
        const option = {
          title: {
            text: '用户活跃度分布',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 10,
            data: ['高度活跃', '中度活跃', '轻度活跃', '不活跃']
          },
          series: [
            {
              name: '活跃度分布',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 18,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 3245, name: '高度活跃', itemStyle: { color: '#3B82F6' } },
                { value: 4126, name: '中度活跃', itemStyle: { color: '#10B981' } },
                { value: 2876, name: '轻度活跃', itemStyle: { color: '#F59E0B' } },
                { value: 2543, name: '不活跃', itemStyle: { color: '#94A3B8' } }
              ]
            }
          ]
        };
        
        myChart.setOption(option);
        
        // 窗口大小变化时重绘图表
        window.addEventListener('resize', function() {
          myChart.resize();
        });
      }
      
      // 初始化活跃时间段图表
      function initActiveTimeChart() {
        const chartDom = document.getElementById('activeTimeChart');
        const myChart = echarts.init(chartDom);
        const option = {
          title: {
            text: '用户活跃时间段',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['0-3', '3-6', '6-9', '9-12', '12-15', '15-18', '18-21', '21-24'],
            axisLabel: {
              interval: 0
            }
          },
          yAxis: {
            type: 'value',
            name: '活跃用户数',
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          series: [
            {
              name: '活跃用户',
              type: 'bar',
              data: [526, 325, 1876, 3254, 2876, 3567, 4256, 3125],
              itemStyle: {
                color: function(params) {
                  const colorList = ['#94A3B8', '#94A3B8', '#3B82F6', '#3B82F6', '#10B981', '#10B981', '#F59E0B', '#F59E0B'];
                  return colorList[params.dataIndex];
                }
              }
            }
          ]
        };
        
        myChart.setOption(option);
        
        // 窗口大小变化时重绘图表
        window.addEventListener('resize', function() {
          myChart.resize();
        });
      }
      
      // 初始化用户来源图表
      function initUserSourceChart() {
        const chartDom = document.getElementById('userSourceChart');
        const myChart = echarts.init(chartDom);
        const option = {
          title: {
            text: '用户来源分布',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 10,
            data: ['直接注册', '搜索引擎', '社交媒体', '邀请注册', '其他渠道']
          },
          series: [
            {
              name: '来源渠道',
              type: 'pie',
              radius: '70%',
              data: [
                { value: 9865, name: '直接注册', itemStyle: { color: '#3B82F6' } },
                { value: 7562, name: '搜索引擎', itemStyle: { color: '#10B981' } },
                { value: 5421, name: '社交媒体', itemStyle: { color: '#F59E0B' } },
                { value: 4258, name: '邀请注册', itemStyle: { color: '#8B5CF6' } },
                { value: 1436, name: '其他渠道', itemStyle: { color: '#94A3B8' } }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        
        myChart.setOption(option);
        
        // 窗口大小变化时重绘图表
        window.addEventListener('resize', function() {
          myChart.resize();
        });
      }
      
      // 初始化用户行为图表
      function initUserBehaviorChart() {
        const chartDom = document.getElementById('userBehaviorChart');
        const myChart = echarts.init(chartDom);
        const option = {
          title: {
            text: '用户行为分析',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          yAxis: {
            type: 'category',
            data: ['浏览文章', '发表评论', '发布文章', '点赞', '收藏', '分享']
          },
          series: [
            {
              name: '行为次数',
              type: 'bar',
              data: [28543, 12567, 3256, 18765, 9876, 7654],
              itemStyle: {
                color: function(params) {
                  const colorList = ['#3B82F6', '#10B981', '#F59E0B', '#8B5CF6', '#EC4899', '#6366F1'];
                  return colorList[params.dataIndex];
                }
              },
              label: {
                show: true,
                position: 'right',
                formatter: '{c}'
              }
            }
          ]
        };
        
        myChart.setOption(option);
        
        // 窗口大小变化时重绘图表
        window.addEventListener('resize', function() {
          myChart.resize();
        });
      }
      
      // 页面加载完成后初始化所有图表
      window.addEventListener('load', function() {
        initGrowthChart();
        initActiveLevelChart();
        initActiveTimeChart();
        initUserSourceChart();
        initUserBehaviorChart();
      });
      
      // 活跃度周期变更事件
      form.on('select(activeCycle)', function(data) {
        layer.msg(`已切换到${data.value === 'week' ? '周' : data.value === 'month' ? '月' : '季度'}活跃度分析`, {icon: 0, time: 1000});
        // 这里可以根据选择的周期更新活跃度图表
      });
    });
  </script>
</body>
</html>
